<template>
	<div>
		<div>
			<el-button type="warning" plain @click="agree()">发起众筹</el-button>
			<el-button style="position: relative;right: 368px;" @click="shows()">我的众筹</el-button>
			<el-button style="position: relative;right: 368px;" @click="shows()">众筹资产</el-button>

			<!-- 我的众筹 -->
			<div style="display: flex; margin-top: 20px; width: 100%;">
				<transition name="el-fade-in-linear">
					<!-- <div v-show="show" class="transition-box">.el-fade-in-linear</div> -->
					<el-tabs v-show="show" type="border-card" style="width: 98%;">
						<el-tab-pane label="我支持的">
							<span style="color: green;">用户订单列表</span>
							<hr />
							<!-- 订单信息列表 -->
							<div
								style=" margin: 0 auto; width: 95%; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
								<!-- 订单信息展示 -->
								<el-col :span="24">
									<el-card shadow="hover">
										<!-- 表格展示订单信息 -->
										<el-table :data="orderList" border style="width: 100%">
											<el-table-column prop="orderId" label="订单编号" width="180"></el-table-column>
											<el-table-column prop="address" label="支持金额/元"></el-table-column>
											<el-table-column prop="orderNumber" label="订单数量"></el-table-column>
											<el-table-column prop="isStatus" label="交易状态">
												<template slot-scope="scope">
													<span v-if="scope.row.isStatus==2">订单失败</span>
													<span v-if="scope.row.isStatus==1">订单完成</span>
													<span v-if="scope.row.isStatus==0">进行中</span>
												</template>
											</el-table-column>
											<el-table-column fixed="right" label="操作">
												<template slot-scope="scope">
													<el-button @click="selectOrderByoId(scope.row)" type="text"
														size="small">查看</el-button>
													<el-button type="text" @click="deleteOrderByOId(scope.row)"
														size="small">删除</el-button>
												</template>
											</el-table-column>
										</el-table>
										<hr />
										<div>
											<!-- 分页 -->
											<el-pagination @current-change="handleCurrentChange"
												current-page="this.pageNum" background layout="prev, pager, next"
												:total="this.total"></el-pagination>
										</div>
									</el-card>
								</el-col>

								<!-- 订单详情查看对话框 -->
								<el-dialog title="订单详情" :visible.sync="centerDialogVisible" width="60%" center>
									<!-- 表格展示订单项目信息 -->
									<el-form ref="project" :model="project" label-width="120px">
										<el-form-item label="项目名称">
											<el-input v-model="project.projectName" readonly></el-input>
										</el-form-item>
										<el-form-item label="项目开始时间">
											<el-input v-model="project.projectAddTime" readonly></el-input>
										</el-form-item>
										<el-form-item label="项目结束时间">
											<el-input v-model="project.projectEndTime" readonly></el-input>
										</el-form-item>
										<el-form-item label="项目状态">
											<el-select v-model="istg" disabled>
											    <el-option v-for="item in options" :key="item.istg" :label="item.label" 
											      :value="item.istg">
											    </el-option>
											  </el-select>
										</el-form-item>
										<el-form-item label="项目简介">
											<el-input type="textarea" v-model="project.projectMessage" readonly></el-input>
										</el-form-item>
									</el-form>

									<!-- 展示订单项目回报信息 -->
									<el-form ref="retuList" :model="retuList" label-width="120px">
										<el-form-item label="支付金额/元">
											<el-input v-model="payMoney" readonly></el-input>
										</el-form-item>
										<el-form-item label="回报开始时间">
											<span>回报开始时间在众筹结束后{{retuList.retuTime}}天</span>
										</el-form-item>
										<el-form-item label="类型">
											<el-radio-group v-model="retuType" disabled>
											    <el-radio :label="0">虚拟回报</el-radio>
											    <el-radio :label="1">实物回报</el-radio>
											</el-radio-group>
										</el-form-item>
										<el-form-item label="是否包邮">
											<el-radio-group v-model="isEmail" disabled>
											    <el-radio :label="0">包邮</el-radio>
											    <el-radio :label="1">不包邮</el-radio>
											</el-radio-group>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
											  <span>(不包邮邮费10元)</span>
										</el-form-item>
										<el-form-item label="回报内容">
											<el-input type="textarea" v-model="retuList.retuText"></el-input>
										</el-form-item>
									</el-form>


									<span slot="footer" class="dialog-footer">
										<el-button @click="centerDialogVisible = false">关 闭</el-button>
									</span>
								</el-dialog>
								<!-- 订单详情查看对话框结束 -->
							</div>

						</el-tab-pane>
						<el-tab-pane label="我关注的">
							<!-- 项目信息展示 -->
							<el-col :span="24">
								<el-card shadow="hover">
									<!-- 表格展示项目信息 -->
									<el-table :data="followList" :model="followList" border style="width: 100%">
										<el-table-column prop="project.projectName" label="项目信息" width="180"></el-table-column>
										
										<el-table-column prop="project.peoples" label="支持人数"></el-table-column>
										<el-table-column prop="count" label="关注人数">
											
										</el-table-column>
										<el-table-column fixed="right" label="操作">
											<template slot-scope="scope">
												<el-button @click="delFollowByFId(scope.row)" type="text"
													size="small">取消关注</el-button>
												<el-button @click="showProByPId(scope.row)" type="text"
													size="small">查看项目</el-button>
											</template>
										</el-table-column>
									</el-table>
									<hr />
									<div>
										<!-- 分页 -->
										<el-pagination @current-change="handleCurrentChange"
											current-page="this.pageNum" background layout="prev, pager, next"
											:total="this.total"></el-pagination>
									</div>
								</el-card>
							</el-col>
						</el-tab-pane>
						<el-tab-pane label="我发起的">
							<el-tabs v-model="tableData" @tab-click="handleClick">
								
								<el-tab-pane label="全部" name="first" @click="selectProjectByUserId()">
								<el-table
								    :data="tableData"
								    height="250"
								    border
								    style="width: 100%">
								    <el-table-column
								      prop="projectName"
								      label="项目信息"
								      width="380">
								    </el-table-column>
								    <el-table-column
								      prop="projectAllMoney"
								      label="募集金额"
								      width="200">
								    </el-table-column>
								    <el-table-column
								      prop="istg"
								      label="当前状态">
									  <template slot-scope="scope">
									  	<span v-if="scope.row.istg==1">审核中</span>
									  	<span v-if="scope.row.istg==2">审核成功</span>
									  	<span v-if="scope.row.istg==3">审核失败</span>
										<span v-if="scope.row.istg==4">众筹中</span>
										<span v-if="scope.row.istg==5">众筹失败</span>
										<span v-if="scope.row.istg==6">众筹成功</span>
									  </template>
									  
								    </el-table-column>
									<el-table-column fixed="right" label="操作">
										<template slot-scope="scope">
											<el-button @click="selectProjectByProjectId(scope.row.projectId)" type="text"
												size="small">查看</el-button>
											<el-button type="text" @click="deleteProjectByProjectId(scope.row.projectId)"
												size="small">删除</el-button>
												<el-button type="text"  @click="ggtc(scope.row.projectId)"
													size="small">广告申请</el-button>
										</template>
									</el-table-column>
								  </el-table>
								</el-tab-pane>
								<el-tab-pane label="众筹中" name="second">
									<el-table
									    :data="tableData1"
									    height="250"
									    border
									    style="width: 100%">
									    <el-table-column
									      prop="projectName"
									      label="项目信息"
									      width="380">
									    </el-table-column>
									    <el-table-column
									      prop="projectAllMoney"
									      label="募集金额"
									      width="200">
									    </el-table-column>
									    <el-table-column
									      prop="istg"
									      label="当前状态">
										  <template slot-scope="scope">										  
											<span v-if="scope.row.istg==4">众筹中</span>									
										  </template>
										  
									    </el-table-column>
										<el-table-column fixed="right" label="操作">
											<template slot-scope="scope">
												<el-button @click="selectProjectByProjectId(scope.row.projectId)" type="text"
													size="small">查看</el-button>
												<el-button type="text" @click="deleteProjectByProjectId(scope.row.projectId)"
													size="small">删除</el-button>
													<el-button type="text"  @click="ggtc(scope.row.projectId)"
														size="small">广告申请</el-button>
											</template>
										</el-table-column>
									  </el-table>
								</el-tab-pane>
								<el-tab-pane label="众筹成功" name="third">
									<el-table
									    :data="tableData2"
									    height="250"
									    border
									    style="width: 100%">
									    <el-table-column
									      prop="projectName"
									      label="项目信息"
									      width="380">
									    </el-table-column>
									    <el-table-column
									      prop="projectAllMoney"
									      label="募集金额"
									      width="200">
									    </el-table-column>
									    <el-table-column
									      prop="istg"
									      label="当前状态">
										  <template slot-scope="scope">										  
											<span v-if="scope.row.istg==6">众筹成功</span>
										  </template>
										  
									    </el-table-column>
										<el-table-column fixed="right" label="操作">
											<template slot-scope="scope">
												<el-button @click="selectProjectByProjectId(scope.row.projectId)" type="text"
													size="small">查看</el-button>
												<el-button type="text" @click="deleteProjectByProjectId(scope.row.projectId)"
													size="small">删除</el-button>
													<el-button type="text"  @click="ggtc(scope.row.projectId)"
														size="small">广告申请</el-button>
											</template>
										</el-table-column>
									  </el-table>
								</el-tab-pane>
								<el-tab-pane label="众筹失败" name="fourth"><el-table
								    :data="tableData3"
								    height="250"
								    border
								    style="width: 100%">
								    <el-table-column
								      prop="projectName"
								      label="项目信息"
								      width="380">
								    </el-table-column>
								    <el-table-column
								      prop="projectAllMoney"
								      label="募集金额"
								      width="200">
								    </el-table-column>
								    <el-table-column
								      prop="istg"
								      label="当前状态">
									  <template slot-scope="scope">									  
										<span v-if="scope.row.istg==5">众筹失败</span>
									  </template>
									  
								    </el-table-column>
									<el-table-column fixed="right" label="操作">
										<template slot-scope="scope">
											<el-button @click="selectProjectByProjectId(scope.row.projectId)" type="text"
												size="small">查看</el-button>
											<el-button type="text" @click="deleteProjectByProjectId(scope.row.projectId)"
												size="small">删除</el-button>
												<el-button type="text"  @click="ggtc(scope.row.projectId)"
													size="small">广告申请</el-button>
										</template>
									</el-table-column>
								  </el-table></el-tab-pane>
							</el-tabs>
						</el-tab-pane>
					</el-tabs>
				</transition>
			</div>

			<!-- 项目信息查看 -->
			<el-drawer
			  title="我是标题"
			  :visible.sync="drawer"
			  :with-header="false">
			  <span>我来啦!</span>
			  <el-form ref="project" :model="project" label-width="120px">
			  	<el-form-item label="项目名称">
			  		<el-input v-model="project.projectName" readonly></el-input>
			  	</el-form-item>
			  	<el-form-item label="项目开始时间">
			  		<el-input v-model="project.projectAddTime" readonly></el-input>
			  	</el-form-item>
			  	<el-form-item label="项目结束时间">
			  		<el-input v-model="project.projectEndTime" readonly></el-input>
			  	</el-form-item>
			  	<el-form-item label="项目状态">
			  		<el-select v-model="istg" disabled>
			  		    <el-option v-for="item in options" :key="item.istg" :label="item.label" 
			  		      :value="item.istg">
			  		    </el-option>
			  		  </el-select>
			  	</el-form-item>
			  	<el-form-item label="项目简介">
			  		<el-input type="textarea" v-model="project.projectMessage" readonly></el-input>
			  	</el-form-item>
			  </el-form>
			  
			</el-drawer>
			
			<!-- 广告申请 -->
			<el-dialog
			  title="提示"
			  :visible.sync="dialogVisible"
			  width="30%"
			  :before-close="handleClose">
			  <span>申请广告</span>
			  <el-form :model="advert" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			    <el-form-item label="广告名称" prop="advertName">
			      <el-input v-model="advert.advertName"></el-input>
			    </el-form-item>
			   
			    <el-form-item label="开始时间" required>
			      <el-col :span="11">
			        <el-form-item prop="date1">
			          <el-date-picker type="date" placeholder="选择开始日期" v-model="advert.date1" style="width: 100%;"></el-date-picker>
			        </el-form-item>
			      </el-col>
			      
			     
			    </el-form-item>
				
				<el-form-item label="结束时间" required>
				  <el-col :span="11">
				    <el-form-item prop="date2">
				      <el-date-picker type="date" placeholder="选择结束日期" v-model="advert.date2" style="width: 100%;"></el-date-picker>
				    </el-form-item>
				  </el-col>
				  
				 
				</el-form-item>
			    
			  </el-form>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="guanggaoshenqing()">确 定</el-button>
			  </span>
			</el-dialog>
			
			<!-- 众筹资产 -->
			<div style="display: flex; margin-top: 20px; height: 100px;">
				<transition name="el-fade-in-linear">
					<div v-show="show1" class="transition-box">众筹资产</div>
				</transition>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				show1: false,
				pageNum: '1',
				total: '',
				centerDialogVisible: false,
				orderList: [],
				project: {},
				istg: '',
				orderNum:'',
				payMoney: '',
				retuList: {},
				isEmail: '',
				retuType: '',
				options: [
					{ istg: 4, label: '众筹中' }, 
					{ istg: 5, label: '众筹失败' },
					{ istg: 6, label: '众筹成功' }
				],
				guanzhuxiangmu:[],
				zcrs:'',
				gzrs:'',
				// 我发起的 全部众筹
				tableData: [],
				//我发起的 众筹中众筹
				tableData1:[],
				//我发起的 众筹成功众筹
				tableData2:[],
				//我发起的 众筹失败众筹
				tableData3:[],
				drawer: false,
				dialogVisible:false,
				advertProjectId:'',
				 advert: {
				    advertName: '',				         
				    date1: '',
				    date2:''
				  },
				    rules: {
				            advertName: [
				              { required: true, message: '请输入广告名称', trigger: 'blur' },  
				            ],
				          
				            date1: [
				              { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' }
				            ],
				            date2: [
				              { type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }
				            ]				            
				  },
				followList: []
			}
		},
		methods: {
			// 协议
			agree() {
				this.$router.push('/agree')
			},
			handleClick(row) {
				console.log(row);
			},
			shows(){
				this.show1 = !this.show1
				this.show = !this.show
			},
			/* 根据订单id逻辑删除订单信息 */
			async deleteOrderByOId(val) {
				var param = new URLSearchParams();
				param.append("orderId", val.orderId)
				var res = await this.$http.post("deleteOrderByOrderId", param);
				if (res.data.code == 200) {
					this.selectAllOrder()
					this.$message.success(res.data.message)
				} else {
					this.$message.error(res.data.message)
				}
			},
			/* 根据订单外键项目id查询项目和回报等有关信息信息 */
			async selectOrderByoId(val) {
				var param = new URLSearchParams();
				param.append("projectId", val.pId)
				var res = await this.$http.post("selectProjectByProjectId", param);
				if (res.data.code == 200) {
					this.project = res.data.data[0]
					this.istg = this.project.istg
					var param1 = new URLSearchParams();
					param1.append("retuId", val.retuId)
					var resRetu = await this.$http.post("selectRetuTableByRId", param1);
					if (resRetu.data.code == 200) {
						this.retuList = resRetu.data.data[0]
						this.isEmail = this.retuList.isEmail
						this.retuType = this.retuList.retuType
						this.payMoney = parseInt(this.retuList.payMoney)*parseInt(val.orderNumber)
					} else {
						this.$message.error(res.data.message)
					}
					this.centerDialogVisible = true
				} else {
					this.$message.error(res.data.message)
				}

			},
			/* 根据回报id删除该回报信息 */
			async selectAllOrder() {
				var userId = window.sessionStorage.getItem("userId")
				var param = new URLSearchParams();
				param.append("userId", userId)
				param.append("pageNum", this.pageNum)
				var res = await this.$http.post("selectOrderByUserId", param);
				console.log(res.data.data.data)
				if (res.data.code == 200) {
					this.orderList = res.data.data.list
					this.total = res.data.data.total * 2
				} else {
					this.$message.error(res.data.message)
				}
			},
			handleCurrentChange(val) {
				this.pageNum = val
				this.selectAllOrder()
			},
			// 根据用户id查询用户发起的项目
			async selectProjectByUserId(){
				var userId = window.sessionStorage.getItem("userId")
				var param = new URLSearchParams();
				param.append("userId",userId)
				var res = await this.$http.post("/selectAllProjectByUserId",param)				
				this.tableData = res.data.data
				
			},
			// 根据用户id和状态查询用户发起的项目
			async selectProjectByIstgAndUserId(){
				
				var userId = window.sessionStorage.getItem("userId")
				var param = new URLSearchParams();
				param.append("userId",userId)
				param.append("istg",4)
				var res = await this.$http.post("/selectProjectByIstgAndUserId",param)
				this.tableData1 = res.data.data
				
				var param1 = new URLSearchParams();
				param1.append("userId",userId)
				param1.append("istg",6)
				var res1 = await this.$http.post("/selectProjectByIstgAndUserId",param1)
				this.tableData2 = res1.data.data
				
				var param2 = new URLSearchParams();
				param2.append("userId",userId)
				param2.append("istg",5)
				var res2 = await this.$http.post("/selectProjectByIstgAndUserId",param2)
				this.tableData3 = res2.data.data
				
			},
			async selectProjectByProjectId(val){		
				var param = new URLSearchParams();
				param.append("projectId", val)
				var res = await this.$http.post("/selectProjectByProjectId",param)
				this.project = res.data.data[0]			
				this.drawer = true
			},
			// 项目删除
			async deleteProjectByProjectId(val){			
				var param = new URLSearchParams();
				param.append("projectId", val)
				var res = await this.$http.post("/deleteProjectByProjectId",param)
				if(res.data.code == 200){
					this.selectProjectByUserId()				
					this.$message.success("删除成功")
				}else{
					this.$message.success("删除失败")
				}
			},
			// 广告弹窗
			ggtc(val){
				
				this.dialogVisible = true
				
				this.advertProjectId = val
			},
			// 广告申请
			async guanggaoshenqing(){
				if(this.advert.advertName!=''&&this.advert.date1!=''&&this.advert.date2!=null){
				var param = new URLSearchParams();
				param.append("advertName",this.advert.advertName)
				param.append("projectId", this.advertProjectId)
				param.append("beginTime",this.advert.date1)
				param.append("endTime",this.advert.date2)
				var res = await this.$http.post("/addAdvert",param)
				if(res.data.code==200){
					this.$message.success("添加成功")
					
				}else{
					this.$message.error("添加失败")
				}
				this.dialogVisible = false
				this.advert.advertName = ''
				this.advert.date1 = ''
				this.advert.date2 = ''
			}else{
				this.$message.error("请先确认填写数据")
			}
		},

			/* 查询所有用户关注项目相关信息 */
			async selectAllFollowProByUserId(){
				var userId = window.sessionStorage.getItem("userId")
				var param = new URLSearchParams();
				param.append("userId", userId)
				param.append("pageNum", this.pageNum)
				var res = await this.$http.post("selectFollowByUserId", param);
				console.log(res.data.data)
				if (res.data.code == 200) {
					this.followList = res.data.data.list
					this.total = res.data.data.total * 2
				} else {
					this.$message.error(res.data.message)
				}
			},
			/* 取消关注 */
			async delFollowByFId(val){
				var id = val.id;
				var param = new URLSearchParams();
				param.append("id", id)
				var res = await this.$http.post("delFollowById", param);
				if (res.data.code == 200) {
					this.selectAllFollowProByUserId()
				} else {
					this.$message.error(res.data.message)
				}
			},
			/* 查看项目详情 */
			async showProByPId(val){
				var projectId = val.project.projectId;
				window.sessionStorage.setItem("projectId",projectId)
				this.$router.push('/zhichi')
			}
		},
		mounted() {
			this.selectAllOrder()
			this.selectAllFollowProByUserId()
			this.selectProjectByUserId()
			this.selectProjectByIstgAndUserId()
		}
	}
</script>

<style>
	.lie {
		width: 15%;
		float: left;
		margin: 0 auto;
		line-height: 30px;
	}

	.order_list {
		width: 95%;
		margin: 0 auto;
	}
</style>
